<template>
  <a-row type="flex" style="flex-flow: inherit;background-color: #fff;height: 100%;">
    <a-col :span="10" style="padding: 20px;border-right: 1px solid #ddd;">
      <h1 class="title" style="text-align: center;margin-bottom: 50px;">法律援助申请</h1>
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="咨询人" prop="sjskPersonId">
          <a-select v-model="form.sjskPersonId" placeholder="请选择" @change="onSjskPersonChange">
            <a-select-option :value="item.sjskPersonId" v-for="(item, index) in sjskPersonList" :key="index"
              :identityCard="item.identityCard" :sjskType="item.sjskType" :phone="item.phone" :realName="item.realName">
              {{item.realName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="身份证号" prop="identityCard">
          <a-select v-model="form.identityCard" placeholder="请选择" :disabled="idcardFilter.length <= 1" @change="onIdcardChange">
            <a-select-option :value="item.identityCard" v-for="(item, index) in idcardFilter"  :phone="item.phone" :key="index">
              {{item.identityCard}}
            </a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item label="人员类型" >
          <j-dict-select-tag
            v-model="form.sjskType"
            dictCode="personTypeConsult"
             placeholder="请选择"
            style="min-width: 100px"
          />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input v-model="form.phone" placeholder="" disabled />
        </a-form-model-item>
        <a-form-model-item label="咨询主题" prop="topical">
          <a-input v-model="form.topical" placeholder="" />
        </a-form-model-item>

        <a-form-model-item label="区域" prop="areaLevel">
          <a-cascader :options="areaOptions" placeholder="请选择" :load-data="loadCascader" changeOnSelect
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }" change-on-select @change="onAreaChange"
            v-model="form.areaLevel" />
        </a-form-model-item>
        <a-form-model-item label="机构" prop="lawFirmId">
          <a-select v-model="form.lawFirmId" placeholder="请选择" @change="onOrganizeChange">
            <a-select-option :value="item.id" v-for="(item, index) in lawerOrganize" :key="index"
              :organizationArea="item.organizationArea" :areaName="item.areaName">{{item.organizationName}}</a-select-option>

          </a-select>
        </a-form-model-item>
        <a-form-model-item label="机构地址">
          <a-input v-model="form.address" placeholder="" disabled />
        </a-form-model-item>
        <a-form-model-item label="律师" prop="lawyerId">
          <div class="carousel">
            <a-icon style="cursor: pointer;" type="left" @click="onLeft"/>
            <div class="item-wrap">
              <div class="overflow-wrap" :style="{left: left + 'px'}">
                <div class="item" v-for="(item, index) in lawyerList" :class="{active: form.lawyerId === item.id}" :key="index" @click="onLayerClick(item)">
                  <div>姓名：{{item.lawyerName}}</div>
                  <div>联系电话：{{item.lawyerPhone}}</div>
                  <div>擅长领域：{{item.businessArea}}</div>
                </div>
              </div>
              
            </div>
            <a-icon style="cursor: pointer;" type="right" @click="onRight"/>
          </div>
        </a-form-model-item>

        <a-form-model-item>
          <div style="text-align: center;padding-top: 50px;border-top: 1px solid #ddd;">
            <a-button style="margin-right: 20px;width: 140px;" @click="onCancel">
              取消
            </a-button>
            <a-button type="primary" style="margin-right: 20px;width: 140px;" @click="onSubmit">
              确定
            </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-col>
    
  </a-row>
</template>

<script>
  import moment from 'moment'
  import {
    sjskPersonList,
    applyConsult,
  } from '@/api/sjsk/legalAid/consult'
  import {
    listToConsult,
    lawyerList
  } from '@/api/sjsk/legalAid/organize'

  import {
    getXzqhList,
    getXzqhByCode,
  } from '@/api/api'
  export default {
    components: {},
    computed: {

      idcardFilter: function() {
        const list = this.sjskPersonList.filter(item => {
          return item.realName === this.form.realName
        })

        return list
      }
    },
    data() {
      return {
        sjskPersonList: [],
        areaOptions: [],
        lawerOrganize: [],
        lawyerList: [],
        left: 0,
        form: {
          address: '',
          realName: '',
          identityCard: '',
          "approvalId": "",
          "approvalResult": '',
          "areaLevel": [],
          "areaName": "",
          "consultTime": "",
          "content": "",

          "endTime": "",
          "file": "",
          "interviewWay": '',
          "lawFirmId": '',
          "lawyerId": '',
          "nextTopical": "",
          "num": '',
          "sjskPersonId": null,
          "startTime": "",
          "topical": "",
        },
        rules: {
          sjskPersonId: { required: true,type: 'number', message: '请选择', trigger: ['blur'] },
          identityCard: { required: true,type: 'string', message: '请输入', trigger: ['blur'] },
          sjskType: { required: true,type: 'number', message: '请输入', trigger: ['blur'] },
          phone: { required: true, message: '请输入', trigger: ['blur'] },
          topical: { required: true, message: '请输入', trigger: ['blur'] },
          areaLevel: { required: true, message: '请选择', trigger: ['blur'] },
          lawFirmId: { required: true, type: 'number', message: '请选择', trigger: ['blur'] },
          lawyerId: { required: true, type: 'number', message: '请选择', trigger: ['blur'] },
        }
      }
    },
    created() {

      this.getXzqh()
    },
    async mounted() {
      this.getSjskPerson()
    },
    methods: {
      getSjskPerson() {
        sjskPersonList().then(res => {
          this.sjskPersonList = res.result
        })
      },
      onSjskPersonChange(val, option) {
        console.log(option)
        this.form.identityCard = option.data.attrs.identityCard
        this.form.sjskType = option.data.attrs.sjskType
        this.form.phone = option.data.attrs.phone
        this.form.realName = option.data.attrs.realName
      },
      onIdcardChange(val, option) {
        this.form.phone = option.data.attrs.phone
      },
      getXzqh() {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            this.areaOptions = res.result.map(item => {
              item.isLeaf = false
              return item
            })
          }
        })
      },
      loadCascader(selectedOptions) {
        console.log(selectedOptions)
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        getXzqhList({
          level: targetOption.level + 1,
          parent: targetOption.code
        }).then(async (res) => {
          if (res.success) {
            targetOption.loading = false
            targetOption.children = res.result.map(item => {
              item.isLeaf = false
              return item
            })
            this.areaOptions = [...this.areaOptions];
            console.log(this.areaOptions)
          }
        })
      },
      onAreaChange(res) {
        console.log(res)
        this.getLawerOrganize(res[res.length - 1])
        this.form.lawFirmId = ''
      },
      getLawerOrganize(departmentId) {
        listToConsult({
          departmentId
        }).then(res => {
          this.lawerOrganize = res.result
        })
      },
      onOrganizeChange(val, option) {
        
        this.form.address = option.data.attrs.organizationArea
        this.form.areaName = option.data.attrs.areaName
        this.getLawer(val)
        // areaName
      },
      getLawer(lawFirmId) {
        lawyerList({ lawFirmId }).then(res => {
          this.lawyerList = res.result
        })
      },
      onLeft() {
        if(this.left + 120 > 0) {
          this.left = 0
        } else {
          this.left += 120
        }
      },
      onRight() {
        const lawyerListWidth = (this.lawyerList.length * 120) + (this.lawyerList.length * 10)
        console.log(lawyerListWidth)
        if(this.left * -1 > lawyerListWidth) {
          this.left = this.left
        } else {
          this.left -= 120
        }
      },
      onLayerClick(item) {
        this.form.lawyerId = item.id
      },

      onSubmit() {
        this.$refs.form.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          form.areaLevel = form.areaLevel.toString()
          applyConsult(form).then(res => {
            if (res.success) {
              this.$message.success('预约成功')
              setTimeout(() => {
                this.onCancel()
              }, 1500)
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },

      onCancel() {
        this.$router.back()
      },
    }

  }
</script>
<style lang="less" scoped>
  .topBox /deep/.ant-row {
    margin-bottom: 0;
  }

  /deep/.ant-col-7 {
    width: 28%;
  }

  /deep/.ant-col-4 {
    width: 16%;
  }
  .carousel{
    display: flex;
    flex-flow: row;
    height: 120px;
    align-items: center;
    .item-wrap{
      flex: 1;
      overflow: hidden;
      margin: 0 20px;
      position: relative;
      height: 120px;
      .overflow-wrap{
        min-width: 400px;
        height: 120px;
        display: flex;
        position: absolute;
        top: 0;
        >div{
          margin-right: 10px;
          border: 1px solid #ddd;
          padding: 20px;
          border-radius: 4px;
          width: 270px;
          min-width: 270px;
          height: 120px;
          margin-bottom: 5px;
          cursor: pointer;
          line-height: 1;
          >div{
            margin-bottom: 10px;
          }
        }
        .active{
          border-color: rgba(24, 144, 255, 1);
          background-color: rgba(24, 144, 255, 0.047);
        }
      }
      
    }
  }
  
</style>
